<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sketcher</title>

<!-- bs4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
	
<!-- css pie -->
<link rel="stylesheet" href="pie.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- TensorFlow.js script -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
	
<!-- canvas script -->
<script src="fabric.js"></script>
	
<!-- main script -->
<script src = "main.js" > </script>

<!-- main css -->
<link rel = "stylesheet" href="main.css" > 
	
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#"><h1>SKETCH<small>ER</small></h1></a>
  </nav>
<div class="container-fluid"> 

<blockquote class="blockquote text-justify" style="margin:30px;">
 <p> Sketcher is a simple tool that uses CNN to recognize drawings. 
 The CNN was trained to recognize 100 <a href='https://github.com/zaidalyafeai/zaidalyafeai.github.io/blob/master/sketcher/mini_classes.txt'>classes</a> using the quick draw <a href='https://github.com/googlecreativelab/quickdraw-dataset'> dataset</a>. It achieves 6% top 5 error. The accuracy could be improved
but I focused on making the model light with around 1 million parameters. The table  will show the top 5 predictions. </p>
    <footer class="blockquote-footer">ZAID ALYAFEAI</footer>
  </blockquote>
</div>

<div class="row">
  <div class="col" style ='margin-left:100px;'>
<h4 id ='status' >Loading Model... </h4>	  
<canvas id="canvas" width="300" height="300" class="canvas" style="border:1px solid #b9bfc9;margin-top:25px;"></canvas>
<div class="btn-group" style = 'margin-top:40px; '>
<input type="range" min="5" max="20" value="10" class="slider" id="myRange" style ='margin-top:20px;'>
<button type="button" class="btn btn-outline-primary" onclick ='erase()' style ='margin-left:10px;' disabled>Clear</button>
    </div>   
</div>
  <div class="col">
    <section style="margin-top:120px">
    <div class="pieID pie">
      
    </div>
    <ul class="pieID legend">
      <li>
        <em id = "sym1"></em>
        <span id = "prob1" ></span>
      </li>
      <li>
        <em id = "sym2"></em>
        <span id = "prob2"></span>
      </li>
      <li>
        <em id = "sym3"></em>
        <span id = "prob3"></span>
      </li>
      <li>
        <em id = "sym4"></em>
        <span id = "prob4"></span>
      </li>
      <li>
        <em id = "sym5"></em>
        <span id = "prob5"></span>
      </li>
    </ul>
  </section>
</div>
</div>  
</body>
<script src="pie.js"></script>
<script>
	console.log('starting');
	start('en')
</script>
</html>
